<template>
  <Page title="截图页面">
    <div class="cropper">截图页面</div>
    <canvas id="myCanvas" width="500" height="300"></canvas>
    <el-button @click="screenshot">这是按钮</el-button>
  </Page>
</template>

<script setup>


async function screenshot () {
  // 获取Canvas元素
  var canvas = document.getElementById("myCanvas");
  // 获取2D上下文
  var context = canvas.getContext("2d");
  // 绘制图形或动画
  context.fillRect(50, 50, 200, 100);

  // 将Canvas数据保存为图片文件
  var dataUrl = canvas.toDataURL("image/png");

  // 创建图片元素
  var img = new Image();
  img.src = dataUrl;

  // 创建下载链接
  var link = document.createElement("a");
  link.href = dataUrl;
  link.download = "canvas_image.png";

  // 触发下载
  link.click();
}

</script>
<style lang="less" scoped>
@import "./index.less";
</style>